<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { passwordUpdateApi } from '@/apis/user'

const store = useUserStore()

const dialogVisible = ref(false)

/**
 * 退出登录
 */
const logout = () => {
  useUserStore().logout()
  ElMessage.success('退出登录成功')
  dialogVisible.value = false
}
/**
 * 修改密码
 */
const pwdDialogVisible = ref(false)
const pwd = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
})
const rules = {
  oldPassword: [
    { required: true, message: '请输入旧密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个', trigger: 'blur' },
  ],
  confirmPassword: [
    { required: true, message: '请输入确认密码', trigger: 'blur' },
    {
      validator: (rule: any, value: string, callback: any) => {
        if (value !== pwd.value.newPassword) {
          return callback(new Error('两次输入密码不一致'))
        }
        callback()
      },
    },
  ],
}
const closePwdDialog = () => {
  pwdDialogVisible.value = false
  pwd.value = { oldPassword: '', newPassword: '', confirmPassword: '' }
}
const onSubmit = async () => {
  const data = {
    newPassword: pwd.value.newPassword,
    oldPassword: pwd.value.oldPassword,
  }
  await passwordUpdateApi(data)
  ElMessage.success('修改成功~')
  closePwdDialog()
  useUserStore().logout()
  ElMessage.error('请重新登录')
}
</script>

<template>
  <div class="nav-bar">
    <!-- breadcrumb -->
    <div></div>
    <!-- dropdown -->
    <el-dropdown trigger="click">
      <div class="user-wrapper">{{ store.profile.name }}</div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="dialogVisible = true"
            >退出登录</el-dropdown-item
          >
        </el-dropdown-menu>
        <el-dropdown-menu>
          <el-dropdown-item @click="pwdDialogVisible = true"
            >修改密码</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <!-- 退出对话框 -->
    <el-dialog v-model="dialogVisible" title="温馨提示" width="500">
      <el-icon color="red"><WarningFilled /></el-icon>
      <span style="margin-left: 10px">确定要退出登录吗？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="logout"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 修改密码对话框 -->
    <el-dialog
      v-model="pwdDialogVisible"
      title="修改密码"
      style="width: 35%"
      @close="closePwdDialog"
    >
      <el-form
        style="width: 70%; margin: 20px auto"
        label-position="top"
        :model="pwd"
        :rules="rules"
      >
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input
            placeholder="请输入旧密码"
            show-password
            v-model="pwd.oldPassword"
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            placeholder="请输入新密码"
            show-password
            v-model="pwd.newPassword"
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            placeholder="请输入新密码"
            show-password
            v-model="pwd.confirmPassword"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="closePwdDialog">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确定 </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.nav-bar {
  height: 60px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 50px 0 20px;

  .user-wrapper {
    outline: none;
    cursor: default;
    color: var(--el-color-black);
  }
}
</style>
